<template>
  <div class="AddOrUpdate_main add_container column_two">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">

        <el-form-item label="IOT编码" prop="deviceId">
          <el-input v-model="formData.deviceId" disabled clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="IOT名称" prop="hostName">
          <el-input v-model="formData.hostName" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="IOT类型" prop="iotType">
          <el-input v-model="formData.iotType" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联网方式" prop="netWorkingType">
          <el-select v-model="formData.netWorkingType" filterable clearable placeholder="请选择">
            <el-option
              v-for="item in netWorkingTypeOptions"
              :key="item.id"
              :label="item.id"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联设备" prop="deviceName">
          <el-input v-model="formData.deviceName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="客户归属" prop="customerId">
          <el-select v-model="formData.customerId" filterable clearable placeholder="请选择">
            <el-option
              v-for="item in customerOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="CPU 核心数" prop="cpuCore">
          <el-input v-model="formData.cpuCore" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="CPU最高频率" prop="cpuMaxFreq">
          <el-input v-model="formData.cpuMaxFreq" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="硬盘(GB)" prop="diskVolume">
          <el-input v-model="formData.diskVolume" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="内存(MB)" prop="memoryVolume">
          <el-input v-model="formData.memoryVolume" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <div class="formItem_header">
          网卡信息
        </div>

        <el-form-item label="网卡名称" prop="netInterface">
          <el-input v-model="formData.netInterface" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="网卡IP" prop="netIp">
          <el-input v-model="formData.netIp" clearable placeholder="请输入" />
        </el-form-item>

        <div class="formItem_header">
          VPN信息
        </div>
        <el-form-item label="VPN 网卡名称" prop="vpnInterface">
          <el-input v-model="formData.vpnInterface" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="VPN IP" prop="vpnIp">
          <el-input v-model="formData.vpnIp" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="VPN 用户名" prop="vpnUsername">
          <el-input v-model="formData.vpnUsername" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="VPN 密码" prop="vpnPassword">
          <el-input v-model="formData.vpnPassword" clearable placeholder="请输入" />
        </el-form-item>
        <div class="formItem_header">
          MQTT信息
        </div>
        <el-form-item label="MQTT 用户名" prop="mqttUsername">
          <el-input v-model="formData.mqttUsername" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="MQTT 密码" prop="mqttPassword">
          <el-input v-model="formData.mqttPassword" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="MQTT IP" prop="mqttHostIp">
          <el-input v-model="formData.mqttHostIp" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="MQTT 端口" prop="mqttHostPort">
          <el-input v-model="formData.mqttHostPort" clearable placeholder="请输入" />
        </el-form-item>
        <div class="formItem_header">
          消息配置
        </div>
        <el-form-item label="消息间隔" prop="frequency">
          <el-input v-model="formData.frequency" clearable placeholder="请输入" />
        </el-form-item>
        <div class="formItem_header">
          流量配置
        </div>
        <el-form-item label="流量预警（MB）" prop="warnNum">
          <el-input v-model="formData.warnNum" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="ICCID" prop="iccid">
          <el-input v-model="formData.iccid" clearable placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { edit } from '@/api/superManage/iotManage/iotConfiguration'
import { list as getCompany } from '@/api/superManage/tenantManage'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: '',
        deviceId: '',
        hostName: '',
        iotType: '',
        deviceName: '',
        customerId: '',
        cpuCore: '',
        cpuMaxFreq: '',
        diskVolume: '',
        memoryVolume: '',
        netWorkingType: '',
        netInterface: '',
        netIp: '',
        vpnInterface: '',
        vpnIp: '',
        vpnUsername: '',
        vpnPassword: '',
        mqttUsername: '',
        mqttPassword: '',
        mqttHostIp: '',
        mqttHostPort: '',
        warnNum: '',
        remark: '',
        iccid: '',
        frequency: ''
      },
      rules: {
        deviceId: [
          { required: true, message: 'IOT编码不能为空', trigger: 'change' }
        ]
      },
      customerOptions: [],
      netWorkingTypeOptions: [
        { id: '有线' },
        { id: '无线' },
        { id: '4G' }
      ]
    }
  },
  mounted() {
    this.initSelect()

    Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
      this.formData[key] = this.defaultValue[key] || this.defaultValue[key] == 0 ? this.defaultValue[key] : ''
    })
  },
  methods: {
    initSelect() {
      getCompany().then(res => {
        this.customerOptions = res.data
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          edit(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.formItem_header{
  border-top: 1px solid #c0c4cc;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 20px;
  margin-right: 20px;
}
.main_main{
  /deep/ .el-form-item__label{
    width: 140px;
  }
}
</style>
